import React, { useEffect, useState } from 'react'
import api from "../../../api"
import CommentView from "../CommentView"
import LoadMore from "../../../components/LoadMore"

export default function Comment ({ id }) {
  const [commentData, setCommentData] = useState([])
  const [hasMore, setHasMore] = useState(false)
  let list = []

  function http () {
    api.comment({ id }).then(res => {
      console.log(id);
      // console.log(res.data);
      if (res.data.status === 200) {
        list = [...list, ...res.data.result.data]
        setCommentData(list)
        setHasMore(res.data.result.hasMore)
        // console.log(list);
      }
    }).catch(error => {
      console.log(error);
    })
  }
  useEffect(() => {
    http();
  }, [])


  function loadMoreHandle () {
    http();
  }

  return (
    <div>
      {
        commentData.length > 0 ? <CommentView data={commentData} />
          : <div>数据加载中</div>
      }
      <LoadMore onLoadMore={loadMoreHandle} hasMore="true" />
    </div>
  )
}
